<template>
  <div class="banner-add">
    <div class="createPost-main-container">
      <el-form ref="form" label-width="120px" :rules="rules" :model="form">

        <el-form-item label="跳转类型" required>
          <el-select v-model="form.linkType" filterable placeholder="跳转类型" @change="reset(form.linkType)">
            <el-option
              v-for="(type, index) in typeList"
              :key="index"
              :label="type.text"
              :value="type.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="选择图片" prop="imgData">
          <upload :data="imgData" />
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" type="text" maxlength="60" show-word-limit />
        </el-form-item>

        <el-form-item label="描述" prop="content">
          <el-input v-model="form.content" type="text" maxlength="100" show-word-limit />
        </el-form-item>

        <el-form-item label="学费">
          <el-input v-model="form.price" />
        </el-form-item>

        <el-form-item v-if="form.linkType==='vocational'" label="跳转链接" required>
          <el-select v-model="form.detailLink" filterable placeholder="跳转详情">
            <el-option
              v-for="(link, index) in vocationalLink"
              :key="index"
              :label="link.name"
              :value="link.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <sticky :class-name="'cms-sub-navbar '+ajaxStatus">
      <el-button :loading="ajaxStatus" style="margin-left: 10px;" type="success" @click="submitForm('1')">
        发布
      </el-button>
      <el-button :loading="ajaxStatus" @click="reset()">
        取消
      </el-button>
    </sticky>

  </div>
</template>

<script>
import { postData, getEditData } from '@/api/home-page/ad-visor'
import { getVocationalLink } from '@/api/common'
import Sticky from 'components/Sticky'
import Upload from 'components/Upload/img-upload'

const defaultForm = {
  position: 'home_1',
  title: '',
  content: '',
  link: '',
  linkType: 'vocational',
  price: '',
  image: ''
}

const typeList = [
  { value: 'vocational', text: '专业页面', hasId: true, input: false },
  { value: 'information', text: '学校介绍', hasId: false, input: false },
  { value: 'classes', text: '学校班级', hasId: false, input: false },
  { value: 'direct', text: '手工输入', input: true }
]

export default {
  components: { Sticky, Upload },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    tabName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ajaxStatus: false,
      form: Object.assign({}, defaultForm),
      imgData: {
        myId: Math.random(),
        path: 'home',
        imgUrl: '',
        ImgSize: 10000,
        text: '图片大小不得超过10000K，支持png/jpg格式'
      },
      imgData2: {
        myId: Math.random(),
        path: 'home',
        imgUrl: '',
        ImgSize: 10000,
        text: '图片大小不得超过10000K，支持png/jpg格式'
      },
      // newsLink: [],
      // productLink: [],

      typeList,
      vocationalLink: [],

      rules: {
      }
    }
  },
  computed: {
  },
  created() {
    this.getLinkList()
    if (this.isEdit) {
      const id = this.$route.query && this.$route.query.id
      this.fetchData(id)
    }
  },
  methods: {
    getLinkList() {
      getVocationalLink().then(e => {
        this.vocationalLink = e.data.content
      })
    },
    // 获取编辑数据
    fetchData(id) {
      getEditData(id).then(re => {
        const { data } = re
        this.form = Object.assign(this.form, data)
        this.imgData.imgUrl = data.image
      })
    },

    addBuyLink() {
      const item = {
        name: '',
        buyPlatformColor: '#000',
        link: ''
      }
      this.form.buyLink.push(item)
    },

    deleteBuyLink(index) {
      this.form.buyLink.splice(index, 1)
    },

    /**
     * 保存、发布接口
     *
     * id：保存为空，编辑传列表id
     */
    submitForm(status) {
      if (this.ajaxStatus) {
        return
      }
      this.ajaxStatus = true
      this.form.image = this.imgData.imgUrl
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.status = status
          postData(this.form)
            .then(re => {
              this.ajaxStatus = false
              this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.reset()
            })
            .catch(() => {
              this.ajaxStatus = false
            })
        } else {
          this.ajaxStatus = false
          this.$message.error('请正确填写完整信息后再发布')
          return false
        }
      })
    },

    reset(activityType) {
      console.log('activityType', activityType)
      // 编辑发布后直接关闭tab跳转至列表页面
      if (+this.tabName > 2 && !activityType) {
        this.$emit('removeTab', this.tabName, '1')
        return
      }
      this.imgData = {
        myId: Math.random(),
        model: 'home',
        imgUrl: '',
        ImgSize: 10000,
        text: '图片大小不得超过10000K，支持png/jpg格式'
      }
      this.imgData2 = {
        myId: Math.random(),
        model: 'home',
        imgUrl: '',
        ImgSize: 10000,
        text: '图片大小不得超过10000K，支持png/jpg格式'
      }
      this.form = Object.assign({}, defaultForm, {
        activityType: activityType || 'PRODUCT'
      })
      this.form.buyLink = [{
        name: '',
        buyPlatformColor: '#000',
        link: ''
      }]
      this.$refs['form'].resetFields()
      if (activityType) return
      this.$emit('removeTab', this.tabName)
    }
  }
}
</script>
<style lang="scss" scoped>
.href-remark{
  color: #5e6d82;
  .red {
    background-color: #fdf6ec;
    color: #e6a23c;
  }
}
</style>

